<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="45vw" title="修改佣金" unmount-on-close>
    <page-form class="page-form" :model="form" layout="vertical" :rules="rules" ref="formRef" :gutter="56">
      <page-form-item field="statementAmount" label="对账金额" size="1/2" labelTooltipContent="对账金额为线上订单金额-商家承担优惠金额">
        <i-input-number v-model="form.statementAmount" @change="changeActualAmountFn" />
      </page-form-item>
      <page-form-item label="抽佣比例" size="1/2">
        <i-input-number disabled :model-value="commissionRate" unit="%" />
      </page-form-item>
      <page-form-item field="commissionAmount" label="平台佣金" size="1/2">
        <i-input-number v-model="form.commissionAmount" />
      </page-form-item>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { editCommission } from '@/api/finance/turnover'
  import { Notification } from '@arco-design/web-vue'
  const visible = ref(false)
  const form = ref({})
  const emit = defineEmits(['ok'])
  const open = (record) => {
    visible.value = true
    commissionRate.value = record.commissionRate
    form.value = {
      id: record.id,
      statementAmount: record.statementAmount,
      commissionAmount: record.commissionAmount,
    }
  }
  const rules = {
    statementAmount: { required: true, message: '请输入对账金额' },
    commissionAmount: { required: true, message: '请输入平台佣金' },
  }
  // 抽佣比例
  const commissionRate = ref(0)
  const changeActualAmountFn = (val) => {
    if (val != undefined) {
      let rate = commissionRate.value / 100
      form.value.commissionAmount = val * rate
    }
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    okLoading.value = true
    const param = {
      ...form.value,
    }
    editCommission(param)
      .then(() => {
        Notification.success('修改成功')
        visible.value = false
        emit('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
    width: 100%;
  }
</style>
